<template>
  <div class="erp-page-table-search">
    <span
      class="text"
      @click="dialogVisible = true"
    >
      <i class="el-icon-search" />
      {{ $t('common.erp.search.advancedQuery') }}
    </span>
    <erp-page-form
      ref="erpPageForm"
      :visible-dialog-form.sync="dialogVisible"
      mode="create"
      :title="$t('common.search')"
      :basic-info="title"
      :form="search"
      :loading="loading"
      :save-loading="buttonLoading"
      :save-button-text="$t('common.search')"
      @close="handleClose"
      @save="handleSearch"
    >
      <template slot="tab">
        <slot name="search-advanced" />
      </template>

      <template slot="footer-append">
        <el-button @click="handleReset">
          {{ $t('common.reset') }}
        </el-button>
      </template>
    </erp-page-form>
    <!--        <el-drawer-->
    <!--                class="search-drawer"-->
    <!--                :title="title"-->
    <!--                :withHeader="false"-->
    <!--                :visible.sync="dialogVisible"-->
    <!--                direction="rtl"-->
    <!--                :modal="true"-->
    <!--                :close-on-press-escape="true"-->
    <!--                :before-close="handleClose"-->
    <!--                size="50%"-->
    <!--        >-->
    <!--            <div class="body">-->
    <!--                <div class="title">{{title}}</div>-->
    <!--                -->
    <!--            </div>-->
    <!--            <template #footer>-->
    <!--                <el-button type="primary" @click="handleSearch">{{$t('common.search')}}</el-button>-->
    <!--                <el-button @click="handleReset">{{$t('common.reset')}}</el-button>-->
    <!--                <el-button @click="dialogVisible = false">{{$t('common.close')}}</el-button>-->
    <!--            </template>-->
    <!--        </el-drawer>-->
    <!--        <el-dialog-->
    <!--            class="search-dialog"-->
    <!--            :title="title"-->
    <!--            :visible.sync="dialogVisible"-->
    <!--            :modal="false"-->
    <!--            width="60%"-->
    <!--            :lock-scroll="false"-->
    <!--            :fullscreen="false"-->
    <!--            :before-close="handleClose"-->
    <!--        >-->
    <!--            <div class="body">-->
    <!--                <el-form :model="search" :inline="false" :label-width="labelWidth">-->
    <!--                    <el-row>-->
    <!--                        <slot name="search-advanced"></slot>-->
    <!--                    </el-row>-->
    <!--                </el-form>-->
    <!--            </div>-->
    <!--            <template #footer>-->
    <!--                <el-button type="primary" v-if="search.advanced && search.advanced.length > 0" @click="changeQueryType">{{queryButton}}</el-button>-->
    <!--                <el-button type="primary" @click="handleSearch">{{$t('common.search')}}</el-button>-->
    <!--                <el-button @click="handleReset">{{$t('common.reset')}}</el-button>-->
    <!--                <el-button @click="dialogVisible = false">{{$t('common.close')}}</el-button>-->
    <!--            </template>-->
    <!--        </el-dialog>-->
  </div>
</template>

<script>
import Vue from 'vue';
import ErpPageForm from '@/components/erp/ErpPageForm';
import {Col, Drawer, Row} from "element-ui";
Vue.use(Row);
Vue.use(Drawer);
Vue.use(Col);
/**
 * 头部搜索框
 * @author maolin
 */
export default {
  name: "ErpPageTableSearch",
  components: {
    ErpPageForm
  },
  props: {
    /**
     * 搜索表单
     * @public
     */
    search: {
      type: Object,
      default () {
        return {
        };
      }
    },
    /**
     * 展示关键字搜索
     * @public
     */
    showKeywordSearch: {
      type: Boolean,
      default() {
        return false;
      }
    },
    /**
     * 表单项的宽度
     * @public
     */
    labelWidth: {
      type: String,
      default: '100px'
    }
  },
  data () {
    return {
      dialogVisible: false,
      title: this.$t('common.erp.search.advancedQuery'),
      buttonLoading: false,
      loading: false,
    };
  },
  computed: {
  },
  mounted() {
  },
  methods: {
    /**
     * 关闭搜索框
     * @private
     */
    handleClose () {
      this.dialogVisible = false;
    },
    /**
     * 展示搜索框
     * @private
     */
    show () {
      this.dialogVisible = true;
    },
    /**
     * 触发头部搜索
     * @private
     * @param form
     */
    handleSearch (form) {
      /**
       * 通知父组件头部搜索
       */
      this.$emit('head-search', form);
      this.dialogVisible = false;
    },
    /**
     * 触发重置
     * @private
     */
    handleReset () {
      /**
       * 通知父组件头部重置搜索
       */
      this.$emit('head-reset');
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.erp-page-table-search{
    width: 100%;
    .text{
        display: inline-block;
        height: 100%;
    }
    .search-drawer{
        .body {
            .title {
                font-size: 18px;
                padding: 15px;
                font-weight: bold;
            }
        }
    }
}

</style>
